<script setup lang="ts">
import { useRouter } from "vue-router";
import { useUser } from "@/stores/useUser";
import { reactive } from "vue";

const router = useRouter();
const userStore = useUser();
const form = reactive({ account: "admin", password: "123456" });
const login = async () => {
	await userStore.login(form);
	alert("登录成功");
	router.replace("/");
};
</script>

<template>
	<div class="login">
		<form @submit.prevent="login()">
			<h2>登录</h2>
			<article class="form-item">
				<div class="control input">
					<input type="text" placeholder="请输入用户名" v-model="form.account" />
				</div>
			</article>
			<article class="form-item">
				<div class="control input">
					<input type="password" placeholder="请输入密码" v-model="form.password" />
				</div>
			</article>
			<article class="form-item">
				<div class="control button-group">
					<button class="primary">提交</button>
				</div>
			</article>
		</form>
	</div>
</template>

<style scoped lang="scss">
@use "@/styles/form-item";
.login {
	height: 100%;
	background: url("@/assets/images/img1.jpg") center / cover;
	display: flex;
	justify-content: center;
	align-items: center;
	form {
		padding: 50px;
		width: 400px;
		background-color: #ffffff66;
		backdrop-filter: blur(10px);
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		row-gap: 10px;
		h2 {
			font-size: 32px;
			font-weight: bold;
		}
	}
}
</style>
